<template>
  <div class="welcome-container">
    
    <div class="gradient-section">
      
  <!--    <div class="language-selector">
        <div class="language-icon">En</div>
      </div> -->
      
      
   <!--   <div class="logo-container">
        <img src="/static/img/logo.png" alt="Logo" class="logo-image" />
      </div>
      
      
      <div class="welcome-text">
        <div class="welcome-line1"> {{t('Welcom to the')}}</div>
        <div class="welcome-line2"> Studio</div>
      </div> -->
      
      <div class="buttons-section">
        <div class="buttons-card">
          <button class="login-btn" @click="goHome(1)">{{t('login')}}</button>
          <button class="register-btn" @click="goHome(2)">{{t('register')}}</button>
        </div>
      </div>
    </div>
    
    
   
    
    
  <!--  <div class="forgot-password">
      <a href="#" class="forgot-link">Forgot Password?</a>
    </div> -->
  </div>
</template>

<script lang="ts" defer async setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const goHome = async (type :number) => {
	if(type==1){
		window.top?.postMessage('/pages/login/index', window.location.origin)
		uni.navigateTo({
		  url: '/pages/login/index',
		})
	}else{
		window.top?.postMessage('/pages/login/register', window.location.origin)
		uni.navigateTo({
		  url: '/pages/login/register',
		})
	}
}
</script>

<style scoped>
.welcome-container {
  min-height: 100vh;
  background-image: url("@/static/img/bj.jpg");
   background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  position: relative;
}

.gradient-section {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 20px 40px;
  min-height: 100vh;
}

.buttons-section {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.language-selector {
  position: absolute;
  top: 20px;
  right: 20px;
}

.language-icon {
  width: 40px;
  height: 40px;
  border: 2px solid #666;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #666;
  font-size: 14px;
}

.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-image {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

.logo-image:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 35px rgba(255, 107, 53, 0.5);
}

.welcome-text {
  text-align: center;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.welcome-line1 {
  font-size: 18px;
  margin-bottom: 5px;
}

.welcome-line2 {
  font-size: 22px;
}


.buttons-card {
  /* background: rgba(255, 255, 255, 0.9); */
  /* border-radius: 25px; */
  padding: 25px;
  /* box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); */
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  justify-content: center;
  min-width: 200px;
}

.login-btn {
  width: 180px;
  height: 45px;
  background: linear-gradient(90deg, #FF6B35, #FF8C42);
  border: none;
  border-radius: 22px;
  color: white;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
  position: relative;
  overflow: hidden;
}

.login-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.6);
  background: linear-gradient(90deg, #FF8C42, #FFA500);
}

.register-btn {
  width: 180px;
  height: 45px;
  background: white;
  border: 2px solid #FF6B35;
  border-radius: 22px;
  color: #FF6B35;
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(255, 107, 53, 0.2);
  position: relative;
  overflow: hidden;
}

.register-btn:hover {
  transform: translateY(-3px);
  background: #FF6B35;
  color: white;
  box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
}

.forgot-password {
  padding: 20px;
  text-align: center;
}

.forgot-link {
  color: #999;
  text-decoration: none;
  font-size: 14px;
  font-family: sans-serif;
}

.forgot-link:hover {
  color: #666;
  text-decoration: underline;
}



</style>